<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素消失方式</title>

  <style>
    div{
      width: 200px;
      height: 200px;
      background-color: lightcoral;
      border: 3px solid #000;
    }

    .d1:hover {
        /*会释放布局空间*/
        display: none;
    }
    .d2{
      /*缩放*/
      transform:scale(0);
    }
    .d3:hover{
      /*透明度*/
      opacity: 0;
    }
    .d4:hover
    {
      /*修改背景色为透明*/
      background-color: rgba(0,0,0,0);
    }

  </style>

</head>
<body>
<div class="d1">111</div>
<div class="d2">222</div>
<div class="d3">333</div>
<div class="d4">444</div>
</body>
</html>